<template>
	<div class="release allbgc">
		<div class="release-top alltop">
			发布
		</div>
		
		<van-form @submit="onSubmit" ref="regFrom">
			<van-field
				v-model="title"
				name="title"
				label="标题"
				placeholder="标题"
				:rules="[{ required: true, message: '填写标题' }]"
			/>
		    <van-field
				:value="cate_name"
				name="cate_name"
				label="分类"
				placeholder="请选择分类"
				readonly
				@click="catePickershow=true"
		    />
			<van-field
				v-model="content"
				name="content"
				label="内容"
				type="textarea"
				placeholder="内容"
				:rules="[{ required: true, message: '请填写内容' }]"
			/>
			
		  <!-- 上传 -->
		  <van-field label="图片" label-width="30px" name="fileList">
			  <template #input>
				  <!-- :max-size="500 * 1024"  表示图片最大上传500kb -->
				 <van-uploader v-model="fileList" multiple :max-size="500 * 1024" :max-count="3" />
			  </template>
		  </van-field>
		   
		  <div style="margin: 16px;">
		    <van-button round block type="info" native-type="submit" color="#07c160" style="width: 280px;height: 40px;font-size: 14px;margin: 0 auto;">提交</van-button>
		  </div>
		</van-form>
		<!-- 图标位置 -->
		<van-popup
		  v-model="catePickershow"
		  position="bottom"
		  :style="{ height: '40%' }"
		>
			<van-picker
			  title="请选择"
			  show-toolbar
			  :columns="cate"
			  @confirm="onConfirm"
			  @cancel="catePickershow=false"
			  value-key="name"
			/>
		</van-popup>
	</div>
</template>

<script>
	import {mapState,mapActions} from 'vuex';
	import {addArticle} from '../api/api.js'
	
	
	export default {
		name: 'ReleasePage',
		data(){
			return{
				title:'',
				content:'',
				cate_id:'',
				cate_name:'',
				catePickershow:false,
				fileList:[]//vant 上传组件 接收数据
			}
		},
		computed:{
			...mapState(['cate','uid','userInfo'])
		},
		created() {
			this.$store.dispatch('getCate')
		},
		methods: {
			...mapActions(['upload']),
			
			// picker确认onConfirm
			onConfirm(e){
				console.log(e);
				this.catePickershow=false;
				this.cate_name=e.name;
				this.cate_id=e._id;
			}
			//上传的代码 在index里
			,
			async onSubmit(values){
				// console.log('submit',values);
				let {cate_id,uid,userInfo,fileList}=this;
				let {nickname}=userInfo;
				// console.log(cate_id);
				// console.log(uid);
				// console.log(userInfo);
				// console.log(nickname);
				
				// 需要把file传到服务器 服务器收到以后 存到服务器上  返回该图片在服务器上的地址
				
				if(!uid){
					this.$toast('请先登录')
					setTimeout(v=>{
						this.$router.push('/log')
					},500)
					return
				}
				
				//做判断 上传图片
				// fileList是vant给的相关文件
				let imageSrc= await this.upload(fileList);
				console.log(imageSrc);
				delete values.fileList;
				addArticle({
					...values,
					cate_id,
					author:nickname,
					author_id:uid,
					imageSrc
				}).then((res)=>{
					console.log(res);
					if(res.code==0){
						this.$toast(res.msg);
						
						// 提示你 是否去查看
						// 把数据清掉
						
						
					}else{
						this.$toast(res.msg);
					}
				})
			},
			
		},
		
	};
</script>

<style lang="less">
	.release input,
	.release textarea {
		width: 100%;
		border: none;
		padding-left: 10px;
	}
	.release-top{
		text-align: center;
	}
	.release .van-field__label{
		width: 40px;
	}
	.photo{
		text-align: center;
	}
	.photo button {
		width: 280px;
		height: 40px;
		font-size: 14px;
		color: #fff;
		background-color: @color;
		border: none;
		margin-top: 25px;
	}
</style>
